<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>商家登录</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/vendors.css}">
    <style type="text/css">
        html, body, .loginbox {
            height: 100%;
        }

        img {
            max-width: 100%;
        }

        .leftimg {
            height: 100%;
            width: calc(100% - 400px);
            background: url(/images/adminloginlogo2.webp) no-repeat;
            background-size: cover;
            float: left;
        }

        .rightnav {
            height: 100%;
            width: 400px;
            background: #fff;
            float: right;
            padding: 0 80px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .logininput {
            width: 100%;
        }

        h3 {
            position: relative;
            text-align: center;
            margin: 15px 0;;
        }

        h3:before {
            position: absolute;
            width: 100%;
            height: 1px;
            background: #eee;
            left: 0;
            top: 50%;
            content: ""
        }

        h3 span {
            position: relative;
            background: #fff;
            font-size: 14px;
        }

        .other {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
        }

        .logo2 img {
            margin: 0 auto 80px auto;
            display: block;
        }

        .logininput li {
            padding: 10px 0;
        }

        .logininput input {
            outline: none;
            background: #faffbd;
            border-radius: 40px;
            border: 1px solid #ddd;
            width: 100%;
            height: 40px;
            text-indent: 18px;
        }

        .logininput .btn,
        .logininput .btn:hover,
        .logininput .active {
            border-radius: 40px;
            background: linear-gradient(#38b8ff, #01d4ff) !important;
            border: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
        }

        .logininput .btn:hover {
            background: linear-gradient(#00a3fe, #38b8ff) !important;
            box-shadow: 0 2px 15px rgba(0, 0, 0, .1)
        }

        .forget {
            text-align: right;
            padding-bottom: 50px;
        }

        @media (max-width: 991.98px) {
            body {
                background: #fff !important;
            }

            .leftimg {
                display: none;
            }

            .rightnav {
                height: auto;
                width: 100%;
                padding: 15px;
            }

            .logo2 img {
                margin: 20px auto 20px auto;
                width: 35%;
            }

            .forget {
                text-align: right;
                padding-bottom: 10px;
            }

            .other {
                padding: 15px 25px 0 25px;
            }
        }

    </style>
</head>
<body>
<div class="loginbox">
    <div class="leftimg"></div>
    <div class="rightnav">
        <div class="logininput">
            <div class="logo2"><img th:src="@{/images/logo.jpg}"></div>
            <h1>商家登录</h1>
            <!-- <p>输入您的电子邮件地址和密码以访问管理面板。</p>
             指定表单提交时发送的请求地址-->
            <form th:action="@{/store/login}" method="post">
                <div class="alert alert-danger" th:if="${not #strings.isEmpty(errorMsg)}">
                    <div th:text="${errorMsg}"></div>
                </div>
                <div class="alert alert-danger" th:if="${not #strings.isEmpty(session.errorMsg)}">
                    <div th:text="${session.errorMsg}"></div>
                </div>
                <div>
                    <label for="storePhone" style="margin: 20px 0 0 0">手机号</label>
                    <input type="text" id="storePhone" name="storePhone" placeholder="请输入手机号">
                </div>
                <div>
                    <label for="storePassword" style="margin: 20px 0 0 0">密码</label>
                    <input type="password" id="storePassword" name="storePassword" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label for="verifyCode" style="margin: 20px 0 0 0">验证码</label>
                    <div style="display: flex;">
                        <input type="text" style="width: 280px;" id="verifyCode" name="verifyCode"
                               placeholder="请输入图片验证码">
                        <img title="单击图片刷新！" style="margin: 0 0 0 20px" th:src="@{/common/kaptcha}"
                             onclick="this.src='/common/kaptcha?d='+new Date()*1"/>
                    </div>
                </div>
                <div style="padding: 10px 0">
<!--                    <button class="btn btn-primary float-right" href="/store/register">注册</button>-->
                    <button type="submit" class="btn btn-primary float-right">登录</button>
                </div>
                <div class="reg_right">
                    <a th:href="@{/store/register}">立即注册</a>
                </div>
            </form>
        </div>
    </div>
</div>

<script th:src="@{/js/vendors.min.js}" type="text/javascript"></script>
<script th:src="@{/js/app-menu.js}" type="text/javascript"></script>
<script th:src="@{/js/app.js}" type="text/javascript"></script>
</body>
</html>